const imgWidth = 220;
let container = document.querySelector(".container");

function setHeight(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min)
}

// 计算列数
function cal() {
    let containerWidth = container.clientWidth;
    let columns = Math.floor(containerWidth / imgWidth); // 图片的列数
    let spaceNumber = columns + 1;  // 间隙的数量
    let leftSpace = containerWidth - columns * imgWidth;  // 总间隙的宽度
    let space = leftSpace / spaceNumber; // 每个间隙的空间
    return {
        space,
        columns,
    }
}

// 获取最小值
function getMin(arr) {
    let min = arr[0];
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] < min) {
            min = arr[i];
        }
    }
    return min;
}

// 获取最大值
function getMax(arr) {

    let max = arr[0];
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    return max;
}

// 设置每一张图片的位置
function setPositions() {
    const info = cal();
    // 创建数组，数组里面保存每一列的高度
    let arr = new Array(info.columns);
    arr.fill(0);  // 数组里面的每一项填充为0，保存每一列的高度

    // 计算图片的left和top
    for (let i = 0; i < container.children.length; i++) {
        let img = container.children[i];
        let minTop = getMin(arr);
        img.style.top = minTop + 'px';

        // 首先找到最小数的对应的列数
        let index = arr.indexOf(minTop);
        arr[index] += img.height + info.space;
        let left = (index + 1) * info.space + index * imgWidth;
        img.style.left = left + 'px';
    }
    let max = getMax(arr);
    container.style.height = max + 'px';
    console.log(container.style.height, max)

}

function createImg() {
    for (let i = 0; i <= 40; i++) {
        let img = document.createElement('img');
        img.className = 'img';
        img.src = "./imgs/img.webp";
        img.style.width = imgWidth + 'px';
        img.style.height = setHeight(150, 350) + 'px';
        container.appendChild(img);
        // console.log(img)
        // 排列每一张图片
        img.onload = setPositions;
    }
}

let timeId = null;
function bindEvnet() {
    window.onresize = function () {
        if (timeId) {
            clearInterval(timeId)
        }
        timeId = setTimeout(() => {
            setPositions();
        }, 500)
    }
}

function main() {
    // 加入图片元素，进行初始化操作
    createImg()

    // 绑定事件
    bindEvnet();
}

main();